<template>
  <ul class="article-list">
    <li class="article-list-item" v-for="item in dataList">
      <div class="content-box">
        <div class="img-box">
          <img src="../assets/5.png" alt="" width="100%" height="100%" />
        </div>
        <div class="text-box">
          <div class="title">
            <h4>titletitletitletitletitletitletitletitletitle</h4>
          </div>
          <div class="describe">
            <p>
              xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            </p>
          </div>
          <div class="introductions">
            <div class="left-side">
              <div class="avatar">
                <img src="../assets/avatar.jpg" alt="" />
              </div>
              <div class="author">
                <p>BladeK</p>
              </div>
              <div class="public-time">
                <p>2021/10/27</p>
              </div>
            </div>
            <div class="right-side">
              <div class="footer-print">
                <i class="iconfont icon-jiaoyin"></i>
                <span>555</span>
              </div>
              <div class="like">
                <i class="iconfont icon-xiai"></i>
                <span>666</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="less" scoped>
.article-list {
  width: 100%;
  height: 100%;

  .article-list-item {
    width: 100%;
    height: 330px;
    box-shadow: rgba(50, 50, 93, 0.25) -5px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    &:not(first-child) {
      margin-top: 30px;
    }
    .content-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .img-box {
        width: 100%;
        height: 60%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text-box {
        padding: 10px;
        flex: 1;
        .title {
          padding-top: 5px;
          h4 {
            font-size: 30px;
          }
        }
        .describe {
          p {
            line-height: 30px;
            word-break: normal;
            color: #727272;
            font-size: 20px;
          }
        }
        .introductions {
          width: 100%;
          height: 40px;
          line-height: 30px;
          display: flex;
          .left-side {
            height: 100%;
            display: flex;
            align-items: center;
            margin-right: 20px;
            .avatar {
              height: 100%;
              border-radius: 50%;
              margin-right: 20px;
              img {
                border-radius: 50%;
                width: 40px;
              }
            }
            .author {
              margin-right: 10px;
            }
          }
          .right-side {
            display: flex;
            align-items: center;
            .footer-print {
              margin-right: 20px;
              i {
                margin-right: 10px;
              }
            }
            .like {
              margin-right: 20px;
              i {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>